<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>营销建议 - 航班乘客付费选座预测系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto px-4 py-8 max-w-4xl">
        <header class="text-center mb-8">
            <h1 class="text-3xl font-bold text-gray-800">航班乘客付费选座预测系统</h1>
            <p class="text-gray-600 mt-2">个性化营销建议</p>
        </header>

        <!-- 导航菜单 -->
        <nav class="bg-white rounded-lg shadow-md p-4 mb-8">
            <ul class="flex flex-wrap gap-4 justify-center">
                <li><a href="/" class="text-blue-600 hover:text-blue-800 flex items-center"><i class="fa fa-home mr-1"></i>首页</a></li>
                <li><a href="/result" class="text-blue-600 hover:text-blue-800 flex items-center"><i class="fa fa-bar-chart mr-1"></i>预测结果</a></li>
                <li><a href="/suggestions" class="text-blue-600 hover:text-blue-800 flex items-center"><i class="fa fa-lightbulb-o mr-1"></i>营销建议</a></li>
                {% if current_user.is_admin %}
                <li><a href="/admin" class="text-purple-600 hover:text-purple-800 flex items-center"><i class="fa fa-cog mr-1"></i>系统管理</a></li>
                {% endif %}
                <li><a href="/logout" class="text-red-600 hover:text-red-800 flex items-center"><i class="fa fa-sign-out mr-1"></i>退出登录</a></li>
            </ul>
        </nav>

        {% if not result %}
        <div class="bg-yellow-50 border border-yellow-200 text-yellow-700 p-4 rounded-md mb-6 text-center">
            <p>请先在首页填写乘客信息并进行预测</p>
            <a href="/" class="text-blue-600 hover:underline mt-2 inline-block">返回首页</a>
        </div>
        {% else %}
        <!-- 建议概览 -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-8">
            <div class="flex items-start">
                <div class="flex-shrink-0 mt-1">
                    <i class="fa fa-lightbulb-o text-2xl text-purple-600"></i>
                </div>
                <div class="ml-4">
                    <h2 class="text-xl font-semibold text-gray-800 mb-2">个性化营销建议</h2>
                    <p class="text-gray-600">
                        根据乘客信息和预测结果（付费概率: <span class="font-medium">{{ (result.probability * 100)|round(1) }}%</span>），
                        我们提供以下针对性建议：
                    </p>
                </div>
            </div>
        </div>

        <!-- 建议列表 -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-8">
            <ul class="space-y-4">
                {% for suggestion in result.suggestions %}
                <li class="flex">
                    <div class="flex-shrink-0 h-6 w-6 rounded-full bg-purple-100 flex items-center justify-center mt-0.5">
                        <i class="fa fa-check text-purple-600 text-xs"></i>
                    </div>
                    <p class="ml-4 text-gray-700">{{ suggestion }}</p>
                </li>
                {% endfor %}
            </ul>
        </div>

        <!-- 操作按钮 -->
        <div class="flex justify-between mt-8">
            <a href="/result" class="bg-gray-600 text-white py-2 px-6 rounded-md hover:bg-gray-700 transition flex items-center">
                <i class="fa fa-arrow-left mr-2"></i>返回结果页
            </a>
            <a href="/" class="bg-blue-600 text-white py-2 px-6 rounded-md hover:bg-blue-700 transition flex items-center">
                开始新的预测 <i class="fa fa-refresh ml-2"></i>
            </a>
        </div>
        {% endif %}

        <footer class="mt-12 text-center text-gray-500 text-sm">
            <p>航班乘客付费选座预测系统 &copy; 2023</p>
        </footer>
    </div>
</body>
</html>